<!--
	作者：1979788761@qq.com
	时间：2022-01-11
	描述：图文卡片使用演示
-->
<!doctype html>
<html lang="en">

	<head>
		<!-- 页面编码 -->
		<meta charset="utf-8">
		<!-- 移动设备优先 -->
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<!-- 兼容Edge模式 -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!-- 极速模式 -->
		<meta name="renderer" content="webkit">
		<!-- 标题 -->
		<title>图文卡片使用演示</title>
		<!-- 关键字 -->
		<meta name="keywords" content="BlogUi,图文卡片使用演示" />
		<!-- 描述 -->
		<meta name="description" content="这是BlogUi图文卡片使用演示" />
		<!-- 作者 -->
		<meta name="author" content="大火兔" />
		<!-- 版权 -->
		<meta name="copyright" content="版权所有 BlogUi All Rights Reserved" />
		<!-- 搜索引擎索引向导 -->
		<meta name="robots" content="all" />
		<!-- 图标 -->
	    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
	    <link rel="icon" type="image/svg+xml" href="favicon.ico" />
		<!-- 引入BlogUi.less -->
		<link rel="stylesheet/less" type="text/css" href="../css/blogui.less">
		<!-- 引入最新稳定版Less.js -->
		<script src="../js/less.min.js"></script>
	</head>

	<body>
		<div class="wrap falls">
			<br />
			<div class="column">
				<div class="flow">
					<div class="card">
						<a href="#" title="曾经的爱，曾经的痛，曾经的迷茫，谁让忘不掉你的模样，如今却是永恒的伤。">
							<div class="img">
								<img src="https://t7.baidu.com/it/u=993577982,1027868784&fm=193&f=GIF" class="img-respond" />
							</div>
							<!-- 浮在图片上的单行文字 -->
							<div class="text">曾经的爱，曾经的痛，曾经的迷茫</div>
						</a>
					</div>
				</div>
			</div>
			<div class="column">
				<div class="flow">
					<div class="card">
						<a href="#" title="总有一天我会累、会烦、会躲避、会失去耐心、会歇斯底里、会头也不回……最好别让我有这样一天，因为，谁都拉不回。">
							<div class="img">
								<img src="https://t7.baidu.com/it/u=2749005241,3756993511&fm=193&f=GIF" class="img-respond" />
							</div>
							<!-- 浮在图片上的多行文字，最多3行，3行后会省略 -->
							<div class="more">总有一天我会累、会烦、会躲避、会失去耐心、会歇斯底里、会头也不回……最好别让我有这样一天，因为，谁都拉不回。</div>
						</a>
					</div>
				</div>
			</div>
			<div class="column">
				<div class="flow">
					<div class="card">
						<a href="#" title="">
							<div class="img">
								<img src="https://t7.baidu.com/it/u=1318833646,598769731&fm=193&f=GIF" class="img-respond" />
							</div>
							<!-- 有主副标题的 -->
							<div class="content">
								<div class="main-title">扎心语录</div>
								<div class="sub-title">当你选择欺骗我的时候，就像是被你的刀刺入心脏一样；想要爱却又不敢爱，因为留下了阴影；想怨恨却又恨不了，因为还是牵肠挂肚。</div>
							</div>
						</a>
					</div>
				</div>
			</div>
			<div class="column">
				<div class="flow">
					<!-- 带有背景色的卡片，鼠标移动效果失效 -->
					<div class="card-bg">
						<a href="#">
							<div class="img">
								<img src="https://t7.baidu.com/it/u=852791530,2114255770&fm=193&f=GIF" class="img-respond" />
							</div>
						</a>
					</div>
				</div>
			</div>
		</div>
	</body>
	<!-- 引入兼容IE8的jQuery版本 -->
	<script src="../js/jquery-1.12.4.min.js"></script>
	<!-- 引入BlogUi框架Js -->
	<script src="../js/blogui.js"></script>
	<!-- 引入你的JS -->
	<script src="../js/your.js"></script>

</html>